<template>
  <div class="interface">
    <div class="manage">
      <el-dialog
        :title="operateType === 'add' ? '新增接口' : '更新接口'"
        :visible.sync="isShow"
      >
        <el-form label-width="100px">
          <el-form-item label="接口名称" prop="iname">
            <el-input v-model="iname" placeholder="请输入接口名称"></el-input>
          </el-form-item>
          <el-form-item label="项目名称" prop="pname">
            <el-input v-model="pname" placeholder="请输入项目名称"></el-input>
          </el-form-item>
          <el-form-item label="请求方式" prop="method">
            <el-select v-model="method" placeholder="请选择请求方式">
              <el-option label="GET" value="GET"></el-option>
              <el-option label="POST" value="POST"></el-option>
            </el-select>
          </el-form-item>
         <el-form-item label="请求数据类型" prop="datatype">
           <el-select v-model="datatype" placeholder="请选择请求数据类型">
             <el-option label="JSON" value="JSON"></el-option>
             <el-option label="PARAM" value="PARAM"></el-option>
           </el-select>
         </el-form-item>
          <el-form-item label="请求地址" prop="address">
            <el-input v-model="address" placeholder="请输入请求地址"></el-input>
          </el-form-item>
          <el-form-item label="  " prop="btn">
            <el-button @click="isShow = false" icon="el-icon-close">取消</el-button>
            <el-button type="success" icon="el-icon-check" @click="submit">确定</el-button>
        </el-form-item>
        </el-form>
      </el-dialog>
    </div>
    <div class="header">
      <el-input  @change="get"  v-model="input"  placeholder="请输入内容"
      ></el-input>
      <el-button type="info" icon="el-icon-search">查询</el-button>
      <el-button type="primary" @click="addInterfaces" icon="el-icon-plus">添加</el-button>
    </div>
    <div class="wrapper">
      <el-table  :data="tableData.slice((cur-1)*pageSize, cur*pageSize)"  style="width: 100%"  :default-sort="{ prop: 'date', order: 'descending' }">
        <el-table-column prop="iname" label="接口名称" sortable min-width="15%">
        </el-table-column>
        <el-table-column prop="pname" label="项目名称" sortable min-width="15%">
        </el-table-column>
        <el-table-column prop="method" label="请求方式" sortable min-width="15%">
        </el-table-column>
        <el-table-column prop="datatype" label="数据类型" sortable min-width="20%">
        </el-table-column>
        <el-table-column prop="address" label="请求地址" sortable min-width="15%">
        </el-table-column>
        <el-table-column label="操作" min-width="20%">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" icon="el-icon-edit" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" icon="el-icon-delete" @click="del(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div style="text-align:center;margin:20px">
      <el-pagination background layout="prev, pager, next" @current-change="current_change"
        :total="tableData.length" :page-size="pageSize">
      </el-pagination>
  </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  inject: ["reload"],
  name: "interface",
  components: {
  },
  data() {
    return {
      iname: '',
      pname: '',
      method: '',
      datatype:'',
      address: '',
      id:'',
      operateType: "add",
      isShow: false,
      input: "",
      tableData: [],
      cur:1,//当前页
      total:0,//总页数
      pageSize: 8,//每页展示的内容
    };
  },
  //生命周期函数
  created() {
    this.$api.getGoodsList().then((res) => {
      this.tableData = res.data;
    });
  },
  methods: {
    current_change(newPage){
      this.cur = newPage
    },
    createId(){//生成随机id
      var code= '';
      var codeLength = 4;
      var random = new Array(0,1,2,3,4,5,6,7,8,9);
      for(var i = 0; i <codeLength; i++){
        var index = Math.floor(Math.random()*9)
        code += random[index]
      }
      return code
    },
    handleEdit(row) {
      this.operateType = "edit";
      this.isShow = true;
      this.id = row.id;
      this.iname = row.iname;
      this.pname = row.pname;
      this.method = row.method;
      this.datatype = row.datatype;
      this.address = row.address
    },
    get(val) {//查询操作
      axios
        .get("http://localhost:9999/glist/get", {
          params: {
            iname: val,
          },
        })
        .then((res) => {
          this.tableData = res.data;
        })
        .catch((err) => {
          console.log(获取数据失败);
        });
    },
    submit() {
      if (this.operateType === "add") {//添加商品
        axios.get('http://localhost:9999/glist/add', {
            params: {
              id:this.createId(),
              iname:this.iname,
              pname:this.pname,
              method:this.method,
              datatype:this.datatype,
              address:this.address,
            }
          }).then((res) => {
            this.reload();
            this.isShow = false
          }).catch((err) => {
            console.log("数据获取失败" + err);
          });
      }else {//编辑商品
        axios.get('http://localhost:9999/glist/update',{
          params:{
            id: this.id,
            iname: this.iname,
            pname: this.pname,
            method: this.method,
            datatype: this.datatype,
            address:this.address,
          }
        }).then(res=>{
          this.isShow = false
          this.reload()
        }).catch(err=>{
          console.log('数据获取失败' +err)
        })
      }
    },
    addInterfaces() {//添加商品 打开表单
      this.isShow = true;
      this.operateType = "add";
      this.iname = '',
      this.method = '',
      this.pname = '',
      this.datatype = '',
      this.address = ''
    },
    del(row) {//删除商品
      this.$confirm("此操作将永久删除该信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          axios
            .get("http://localhost:9999/glist/del", {
              params: {
                iname: row.iname,
              },
            })
            .then((res) => {
              this.reload();
              this.$message({
                type: "success",
                message: "删除成功!",
              });
            });
        })
        .catch((err) => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>
<style lang='less' scoped>
.interface {
  margin: 20px;
  height: 592px;
}
.header {
  display: flex;
  button {
    margin-left: 20px;
  }
}
.wrapper {
  margin: 20px;
}
</style>
